<template>
  <div class="poemcontent">
    <!-- 左边部分 -->
    <div class="left">
      <!-- 原文 -->
      <div class="sons">
        <div class="cont">
          <!-- 标题 -->
          <h2 style="font-weight: bold">{{ data.title }}</h2>
          <!-- 作者 朝代 -->
          <span class="source">{{ data.author }} {{ data.dynasty }}</span>
          <!-- 诗词内容 -->
          <div class="contson">
            <div style="white-space: pre-wrap">{{ data.content }}</div>
          </div>
        </div>
        <!-- 工具栏 -->
        <div class="tool">
          <a-tooltip placement="bottom" title="下载">
            <div class="toolpinglun">
              <img
                src="https://song.gushiwen.cn/siteimg/down-load.png"
                alt="下载"
                width="19"
                height="19"
                @click="jumpMobile"
              />
            </div>
          </a-tooltip>
          <a-tooltip placement="bottom" title="复制">
            <div class="toolpinglun" @click="copy(data.content)">
              <img
                src="https://song.gushiwen.cn/siteimg/co-py.png"
                alt="复制"
                width="19"
                height="19"
              />
            </div>
          </a-tooltip>
        </div>
      </div>

      <!--译文及注释  -->
      <div id="fanyi" class="sons" style="display: block">
        <div class="contstyle">
          <h3 style="font-weight: bold">译文及注释</h3>
          <div>
            <strong>译文</strong>
            <div style="white-space: pre-wrap">{{ data.transform }}</div>
          </div>
          <div
            style="white-space: pre-wrap"
            v-bind:class="{ contFanyi: isShowFanyi }"
          >
            <strong>注释</strong>
            <div style="white-space: pre-wrap">{{ data.notes }}</div>
          </div>
          <span
            @click="handleIsShowFanyi"
            style="
              color: rgb(25, 83, 125);
              display: block;
              cursor: pointer;
              float: right;
              margin-bottom: 10px;
            "
          >
            {{ isExpandFanyi ? "收起" : "展开" }}
            <img :src="imageType2" width="12" height="12" />
          </span>
        </div>
      </div>

      <!--赏析 -->
      <div id="shangxi" class="sons" style="display: block">
        <div class="contstyle">
          <h3 style="font-weight: bold">赏析</h3>
          <div
            v-bind:class="{ contshangxi: isShowShangxi }"
            style="white-space: pre-wrap"
          >
            {{ data.appreciation }}
          </div>
          <span
            @click="handleIsShowShangxi"
            style="
              color: rgb(25, 83, 125);
              display: block;
              cursor: pointer;
              float: right;
              margin-bottom: 10px;
            "
          >
            {{ isExpandShangxi ? "收起" : "展开" }}
            <img :src="imageType1" width="12" height="12" />
          </span>
        </div>
      </div>

      <!-- 创作背景 -->
      <div id="beijing" class="sons">
        <div class="contstyle">
          <h3 style="font-weight: bold">创作背景</h3>
          <div style="white-space: pre-wrap">{{ data.creativeBackground }}</div>
        </div>
      </div>

      <!-- 作者简介 -->
      <div class="sonspic">
        <div class="cont" style="margin-top: 13px">
          <h3 style="font-weight: bold">作者简介</h3>
          <div style="white-space: pre-wrap">{{ data.authorIntroduction }}</div>
        </div>
      </div>

      <!-- 英法俄日韩翻译版本 -->
      <div class="sons">
        <div class="contstyle">
          <div class="yizhu">
            <img
              :src="imghanyu"
              width="25"
              height="25"
              @click="changeyiwen(5)"
            />
            <img
              :src="imgriyu"
              width="25"
              height="25"
              @click="changeyiwen(4)"
            />
            <img
              style="display: block"
              :src="imgeyu"
              width="25"
              height="25"
              @click="changeyiwen(3)"
            />
            <img
              style="display: block"
              :src="imgfayu"
              width="25"
              height="25"
              @click="changeyiwen(2)"
            />

            <img
              style="display: block"
              :src="imgyingyu"
              width="25"
              height="25"
              @click="changeyiwen(1)"
            />
          </div>
          <h3 style="font-weight: bold">外文翻译</h3>
          <div style="white-space: pre-wrap">{{ yiwen }}</div>
        </div>
      </div>
    </div>

    <div class="right">
      <div class="sons">
        <div class="title">
          <div class="titleleft"></div>
          猜你喜欢
        </div>
        <div class="suolue">
          <div
            class="suolueliebiao"
            v-for="(item, index) in likeData"
            :key="index"
          >
            <span
              class="suoluetitle"
              @click="viewdetails(item.title, item.author, item.theme)"
              >{{ item.title }}</span
            >
            <span>({{ item.author }})</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import useClipboard from "vue-clipboard3";

export default {
  name: "PoemContent",
  data() {
    return {
      imgyingyu: "/images/yingyuc.png",
      imgfayu: "/images/fayu.png",
      imgeyu: "/images/eyu.png",
      imgriyu: "/images/riyu.png",
      imghanyu: "/images/hanyu.png",
      yiwenindex: 1,
      yiwen: "",
      data: {},
      likeData: [],
      isExpandShangxi: false,
      isExpandFanyi: false,
      isShowShangxi: true,
      isShowFanyi: true,
      imageType1: "https://song.gushiwen.cn/siteimg/jianTop.png",
      imageType2: "https://song.gushiwen.cn/siteimg/jianTop.png",
    };
  },
  beforeRouteUpdate(to, from, next) {
    if (to.params.title != from.params.title) {
      next();
      this.getData(to.params.title);
    }
  },
  setup() {
    const { toClipboard } = useClipboard();
    const copy = async (text) => {
      try {
        await toClipboard(text); //实现复制
        alert("复制成功");
        console.log("Success");
      } catch (e) {
        console.error(e);
      }
    };
    return { copy };
  },
  methods: {
    async getData(title) {
      this.$axios({
        method: "get",
        url: "/poetry/getOntByTitle?title=" + title,
      })
        .then((res) => {
          this.data = res.data.data;
          this.yiwen = this.data.englishTranslation;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getLikeData() {
      let LikeArr = [
        this.$axios.get(
          "/poetry/getByAuthor?author=" + this.$route.params.author
        ),
        this.$axios.get("/poetry/getByTheme?theme=" + this.$route.params.theme),
      ];
      this.$axios.all(LikeArr).then((result) => {
        this.likeData = this.unique(
          result[0].data.data.concat(result[1].data.data)
        );
      });
    },
    viewdetails(title, author, theme) {
      this.$router.push({
        path: `/poemcontent/${title}/${author}/${theme}`,
      });
    },
    unique(arr) {
      // 根据唯一标识orderId来对数组进行过滤
      const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.title) && res.set(arr.title, ""));
    },
    handleIsShowShangxi() {
      if (this.isShowShangxi == true) {
        this.imageType1 = "https://song.gushiwen.cn/siteimg/jianBtn.png";
      } else {
        this.imageType1 = "https://song.gushiwen.cn/siteimg/jianTop.png";
      }
      this.isShowShangxi = !this.isShowShangxi;
      this.isExpandShangxi = !this.isExpandShangxi;
    },
    handleIsShowFanyi() {
      if (this.isShowFanyi == true) {
        this.imageType2 = "https://song.gushiwen.cn/siteimg/jianBtn.png";
      } else {
        this.imageType2 = "https://song.gushiwen.cn/siteimg/jianTop.png";
      }
      this.isShowFanyi = !this.isShowFanyi;
      this.isExpandFanyi = !this.isExpandFanyi;
    },
    changeyiwen(index) {
      switch (this.yiwenindex) {
        case 1:
          this.imgyingyu = "/images/yingyu.png";
          break;
        case 2:
          this.imgfayu = "/images/fayu.png";
          break;
        case 3:
          this.imgeyu = "/images/eyu.png";
          break;
        case 4:
          this.imgriyu = "/images/riyu.png";
          break;
        case 5:
          this.imghanyu = "/images/hanyu.png";
          break;
      }
      switch (index) {
        case 1:
          this.yiwen = this.data.englishTranslation;
          this.imgyingyu = "/images/yingyuc.png";
          break;
        case 2:
          this.yiwen = this.data.frenchTranslation;
          this.imgfayu = "/images/fayuc.png";
          break;
        case 3:
          this.yiwen = this.data.russianTranslation;
          this.imgeyu = "/images/eyuc.png";
          break;
        case 4:
          this.yiwen = this.data.japaneseTranslation;
          this.imgriyu = "/images/riyuc.png";
          break;
        case 5:
          this.yiwen = this.data.koreanTranslation;
          this.imghanyu = "/images/hanyuc.png";
          break;
      }
      this.yiwenindex = index;
    },
    jumpMobile() {
      this.$router.push({
        path: `/mobile`,
      });
    },
  },
  mounted() {
    var title = this.$route.params.title;
    this.getData(title);
    this.getLikeData();
  },
};
</script>

<style scoped>
.poemcontent {
  width: 1000px;
  clear: both;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.poemcontent .left {
  width: 670px;
  clear: left;
  float: left;
}

.poemcontent .left .sons {
  height: auto;
  clear: both;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.poemcontent .left .sons .cont {
  height: auto;
  clear: both;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 200%;
  overflow: hidden;
}

.poemcontent .left .sons .cont .source {
  font-size: 13px;
  color: #65645f;
  margin-bottom: 10px;
  line-height: 200%;
}
.poemcontent .left .sons .cont .contson {
  clear: both;
  overflow: hidden;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 200%;
}

.poemcontent .left .sons .tool {
  height: 32px;
  clear: both;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 3px;
}

.poemcontent .left .sons .tool .toolpinglun {
  height: 30px;
  float: left;
  width: auto;
  margin-left: 20px;
}

.poemcontent .left .sons .contstyle {
  height: auto;
  clear: both;
  margin-top: 10px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 200%;
  margin-bottom: 10px;
}

.poemcontent .left .sons .contstyle .contFanyi {
  white-space: pre-line;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.poemcontent .left .sons .contstyle .contshangxi {
  white-space: pre-line;
  overflow: hidden;
  -webkit-line-clamp: 10;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.poemcontent .left .sons .yizhu {
  width: 300px;
  height: 30px;
  float: right;
}

.poemcontent .left .sons .yizhu img {
  float: right;
  cursor: pointer;
  margin-left: 12px;
}

.poemcontent .left .sonspic {
  height: auto;
  clear: both;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.poemcontent .left .sonspic .cont {
  height: auto;
  clear: both;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 20px;
  margin-right: 20px;
  line-height: 200%;
  overflow: hidden;
  margin-bottom: 10px;
}

.poemcontent .right {
  width: 300px;
  clear: right;
  float: right;
}

.poemcontent .right .sons {
  height: auto;
  width: 298px;
  margin-top: 20px;
  float: left;
  background-color: white;
  box-shadow: rgb(221 221 221) 2px 2px 10px 2px;
  overflow: hidden;
  border: 1px solid #d7d5bc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.poemcontent .right .sons .title {
  height: 25px;
  line-height: 25px;
  clear: both;
  font-weight: bold;
  font-size: 18px;
  margin-top: 20px;
  margin-left: 30px;
  overflow: hidden;
}

.poemcontent .right .sons .title .titleleft {
  height: 21px;
  width: 3px;
  margin-top: 1px;
  float: left;
  clear: left;
  background-color: #a2c241;
  margin-right: 8px;
}

.poemcontent .right .sons .cont {
  height: auto;
  clear: both;
  overflow: hidden;
  padding-bottom: 20px;
}

.poemcontent .right .sons .cont a {
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  width: 70px;
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  text-align: center;
  border: 1px solid #dad9d1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #19537d;
  text-decoration: none;
}

a:any-link {
  cursor: pointer;
  text-decoration: underline;
}
.poemcontent .right .sons .suolue {
  height: auto;
  clear: both;
  overflow: hidden;
  margin-top: 15px;
  margin-left: 30px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.poemcontent .right .sons .suolue .suolueliebiao {
  width: 300px;
  background-image: url(https://song.gushiwen.cn/siteimg/bookdoc.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  float: left;
  margin-bottom: 15px;
  color: #999999;
}

.poemcontent .right .sons .suolueliebiao .suoluetitle {
  margin-left: 10px;
  font-size: 14px;
  float: left;
  color: #19537d;
  text-decoration: none;
}

.poemcontent .right .sons .suolueliebiao .suoluetitle:hover {
  margin-left: 10px;
  font-size: 14px;
  float: left;
  color: #134061;
  text-decoration: underline;
  cursor: pointer;
}
</style>
